<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="侦听变量" v-model="msg">
        <input type="text" placeholder="侦听对象" v-model="student">
    </div>

</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "",
            student: {
                name: "",
                age: 0
            }
        },
        /*watch: {
            // msg:function(newVal,oldVal){
            //     console.log(newVal+"---------->"+oldVal);
            // }
            msg(newVal, oldVal) {
                console.log(newVal + "---------->" + oldVal);
            }
        },
        watch: {
            student: {
                handler: function (newVal, oldVal) {
                    console.log(newVal.name + "---------->" + oldVal.name);
                },
                deep: true
            }
        }*/

    });
   vm.$watch("student",function(newVal,oldVal){
    console.log(newVal + "---------->" + oldVal);
   },{
       deep:true
   });
</script>